<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户信息管理</title>
    <!-- thymeleaf在springboot中静态资源的访问路径不包含 static -->
    <!--引入bootstrap的css样式文件-->
    <link type="text/css" th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.min.css}" rel="stylesheet">
    <!--在bootstrap之前引入jquery-->
    <script type="text/javascript" th:src="@{/jquery-1.12.4/jquery-1.12.4.min.js}"></script>
    <!--引入bootstrap的js脚本-->
    <script type="text/javascript" th:src="@{/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>

    <!--引入分页的资源文件（假分页，如果使用真分页，请集成pageHelper）-->
    <!--引入分页插件的css样式文件-->
    <link type="text/css" th:href="@{/pagination-2.1.4/css/pagination.css}" rel="stylesheet">
    <!--引入分页插件的js-->
    <script type="text/javascript" th:src="@{/pagination-2.1.4/js/pagination.min.js}"></script>

    <script type="text/javascript">
        //////////////////////////////////查询操作///////////////////////////////////////
        // 使用ajax进行查询操作
        function queryUserInfo() {
            // 进行ajax异步处理
            $.ajax({
                type: "POST", // 等价于form表单的 method属性；指明使用post还是get等操作方式
                url: "queryUserInfoByAjax", // 请求的服务器的uri；等价于form表单的 action属性
                data: $("#userInfoQueryForm").serialize(),// 提交的表单的数据，一般使用 jquery的 .serialize()方法进行序列化处理
                dataType: "json", // 表示后台影响方法返回给前台浏览器的数据流格式
                success: function (data) {// ajax引擎代理对象成功接收服务器端的响应，同时进行回调处理
                    // console.log("ajax查询结果集：")
                    // console.log(data);
                    // console.log("Data Saved: " + JSON.stringify(data));

                    // 遍历ajax获取的json对象，将内容显示到table表格中
                    if (data) {

                        // 使用分页插件，将结果集进行分页处理
                        $('#pager').pagination({
                            dataSource: data, // 被分页的数据源，也就是ajax查询的结果集
                            pageSize: 5, // 定义每页显示的记录条数
                            showGoInput: true,
                            showGoButton: true,
                            callback: function (pagedata, pagination) { // 进行分页显示数据的回调处理
                                // template method of yourself
                                // 拼接要显示的html内容
                                var strShowMe = "";
                                // 清空要显示的表格内容
                                $("#tbShowMe").html("");
                                // 使用each函数遍历json对象，并进行显示
                                $.each(pagedata, function (index, eachVal) {
                                    // data参数表示的each函数遍历的结果集；eachVal就是当前遍历的每个元素对象；index就是当前遍历的元素对象在数据集中的下标索引
                                    strShowMe += "<tr>";
                                    strShowMe += "<th scope=\"row\">";
                                    strShowMe += (index + 1);
                                    strShowMe += "</th>";
                                    strShowMe += "<td>";
                                    strShowMe += eachVal.username;
                                    strShowMe += "</td>";
                                    strShowMe += "<td>";
                                    strShowMe += eachVal.useremail;
                                    strShowMe += "</td>";
                                    strShowMe += "<td>";
                                    strShowMe += eachVal.userage;
                                    strShowMe += "</td>";
                                    strShowMe += "<td>";
                                    strShowMe += eachVal.useraddress;
                                    strShowMe += "</td>";
                                    strShowMe += "<td>";
                                    strShowMe += "<button type=\"button\" class=\"btn btn-success\" onclick='showUserInfoModal(" + JSON.stringify(eachVal) + ")'>修改</button>";
                                    strShowMe += "</td>";
                                    strShowMe += "<td>";
                                    strShowMe += "<button type=\"button\" class=\"btn btn-danger\" onclick='deleteUserInfo(" + eachVal.userid + ")'>删除</button>";
                                    strShowMe += "</td>";
                                    strShowMe += "</tr>";
                                });
                                // console.log("表格显示内容：")
                                // console.log(strShowMe);
                                // 将要显示的拼接的html内容放入指定的dom对象中
                                $("#tbShowMe").html(strShowMe);
                            }
                        })
                    }
                },
                error: function () {
                    console.log("执行查询出现问题")
                }
            });
        }

        /////////////////////////////////新增和修改////////////////////////////////////////////
        // 显示新增和修改的modal
        // rowData 是需要进行显示的数据
        // 如果在调用 showUserInfoModal 方法是没有给该方法的参数rowData传递值，则该参数的值默认为 undefined
        function showUserInfoModal(rowData) {
            // 显示modal
            $('#userInfoModal').modal('show');
            // 在modal模态框show之后触发的事件
            // $('#userInfoModal').on('show.bs.modal', function (e) {
            //     // do something...
            //     console.log("事件：show.bs.modal");
            //
            // });

            // modal模态框加载显示之后，如果是修改操作，则需要将修改的数据显示到模态框中
            console.log("修改内容；")
            console.log(rowData)
            fillUserInfoModalForm(rowData);

            // 在modal的模态框中可点击的控件事件
            // $('#userInfoModal').on('click', function (e) {
            //     // do something...
            //     console.log("事件：click");
            //     // 进行数据保存处理
            //     //saveUserInfoModal();
            // });
        }

        // 填充modal模态框的修改数据表单
        function fillUserInfoModalForm(rowData) {

            // 判定 需要填充的参数 rowData的值是否为 undefined
            var myRowData = rowData || {}; // 如果rowData是undefined则赋值为空对象
            // 填充数据到模态框的表单中

            $("#useridModal").val(myRowData.userid); // 用于标识是新增还是修改
            $("#usernameModal").val(myRowData.username);
            $("#userpswModal").val(myRowData.userpsw);
            $("#userpswModal2").val(myRowData.userpsw);
            $("#userageModal").val(myRowData.userage);
            $("#useraddressModal").val(myRowData.useraddress);
            $("#useremailModal").val(myRowData.useremail);

        }

        // 新增操作和修改操作中，保存模态框的表单数据
        function saveUserInfoModal() {
            /*
            此处ajax没有进行文件上传处理，如果记性文件上传，参考：
            https://gitee.com/climpeaker/qd_springboot20190928_ajax_fileupload/blob/master/src/main/resources/templates/userInfoManagerSinglePage/userInfoManager.html
             */
            // 使用ajax进行数据保存
            $.ajax({
                type: "POST", // 等价于form表单的 method属性；指明使用post还是get等操作方式
                url: "saveOrUpdateUserInfoByAjax", // 请求的服务器的uri；等价于form表单的 action属性
                data: $("#userInfoModalForm").serialize(),// 提交的表单的数据，一般使用 jquery的 .serialize()方法进行序列化处理
                dataType: "json", // 表示后台影响方法返回给前台浏览器的数据流格式
                success: function (data) {// ajax引擎代理对象成功接收服务器端的响应，同时进行回调处理
                    console.log("ajax查询结果集：")
                    console.log(data);
                    console.log("保存结果: " + JSON.stringify(data));
                    // 关闭modal模态框
                    // close modal
                    $('#userInfoModal').modal('hide');
                    // 重新查询
                    queryUserInfo();
                },
                error: function () {
                    console.log("执行查询出现问题")
                }
            });
        }

        ///////////////////////删除操作/////////////////////////////////////////////
        function deleteUserInfo(uid) {

            // 使用confirm确认框，让用户确认之后再进行删除操作
            var r = confirm("您是否确认删除该记录？");
            if (r == true) {
                // 确认删除
                // 使用ajax发送到服务器进行删除操作
                $.ajax({
                    type: "POST", // 等价于form表单的 method属性；指明使用post还是get等操作方式
                    url: "deleteUserInfoByAjaxLogic", // 请求的服务器的uri；等价于form表单的 action属性
                    data: "userId=" + uid,// 提交的表单的数据，一般使用 jquery的 .serialize()方法进行序列化处理
                    dataType: "json", // 表示后台影响方法返回给前台浏览器的数据流格式
                    success: function (data) {// ajax引擎代理对象成功接收服务器端的响应，同时进行回调处理
                        console.log("ajax查询结果集：")
                        console.log(data);
                        console.log("逻辑删除结果: " + JSON.stringify(data));
                        // 关闭modal模态框
                        // close modal
                        $('#userInfoModal').modal('hide');
                        // 重新查询
                        queryUserInfo();
                    },
                    error: function () {
                        console.log("执行查询出现问题")
                    }
                });

            } else {
                // 确认不删除
            }


        }
    </script>


</head>
<body>
<div id="divqueryform">

    <form class="form-horizontal" id="userInfoQueryForm">
        <div class="form-group">
        </div>

        <div class="form-group">
            <label for="username" class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
            </div>
            <label for="useremail" class="col-sm-2 control-label">邮箱</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="useremail" name="useremail" placeholder="请输入邮箱">
            </div>
        </div>


        <div class="form-group">
            <label for="userage" class="col-sm-2 control-label">年龄</label>
            <div class="col-sm-4">
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="userage" name="userage" placeholder="请输入开始年龄">
                </div>
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="userage2" name="userage2" placeholder="请输入结束年龄">
                </div>
            </div>
            <label for="useraddress" class="col-sm-2 control-label">地址</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="useraddress" name="useraddress" placeholder="请输入地址">
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-2">
                <button type="button" class="btn btn-default" onclick="queryUserInfo()">查询</button>
            </div>

            <div class="col-sm-offset-4 col-sm-2">
                <button type="button" class="btn btn-default" onclick="showUserInfoModal()">新增</button>
            </div>

        </div>
    </form>
</div>
<div class="bs-example" data-example-id="hoverable-table">
    <table class="table table-hover">
        <thead>
        <tr>
            <th>序号</th>
            <th>用户名</th>
            <th>邮箱</th>
            <th>年龄</th>
            <th>地址</th>
            <th>修改</th>
            <th>删除</th>
        </tr>
        </thead>
        <tbody id="tbShowMe">

        </tbody>
    </table>
    <!--使用分页插件-->
    <div id="pager"></div>
</div>


<!--modal 模态框
bootstrap：
千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要自己写额外的代码来实现。
务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。
-->
<div class="modal fade" id="userInfoModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="exampleModalLabel">用户信息管理</h4>
            </div>
            <div class="modal-body">

                <form id="userInfoModalForm">
                    <div class="form-group">
                        <!--隐藏表单控件的作用：修改时，需要将当前记录的id发给服务器，作为修改记录条件标识-->
                        <input type="hidden" id="useridModal" name="userid">
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="usernameModal" name="username"
                                   placeholder="请输入用户名">
                        </div>
                        <label class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="useremailModal" name="useremail"
                                   placeholder="请输入邮箱">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-4">
                            <input type="password" class="form-control" id="userpswModal" name="userpsw">
                        </div>
                        <label class="col-sm-2 control-label">确认密码</label>
                        <div class="col-sm-4">
                            <input type="password" class="form-control" id="userpswModal2">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">年龄</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="userageModal" name="userage"
                                   placeholder="请输入开始年龄">

                        </div>
                        <label class="col-sm-2 control-label">地址</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="useraddressModal" name="useraddress"
                                   placeholder="请输入地址">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="saveUserInfoModal()">保存&修改
                </button>
            </div>
        </div>
    </div>
</div>
</body>
</html>